<template>
    <div class="min-h-screen bg-gray-50">
  
  
      <div class="max-w-7xl mx-auto px-4 py-8">
        <div class="grid grid-cols-3 gap-8">
          <div class="col-span-2">
            <div class="bg-white p-6 rounded-lg shadow-md">
              <div class="flex items-center justify-between mb-6">
                <div class="flex items-center">
                  <h2 class="text-xl font-bold">{{ data?.exercise_text }}</h2>
                </div>
  
              </div>
  
              <div class="space-y-6">
                <div class="bg-gray-50 p-6 rounded-lg">
                  <div class="space-y-6">
                    <div class="bg-green-50 p-4 rounded-lg mb-4">
                      <div class="flex items-center">
                        <i class="fas fa-check-circle text-green-500 text-xl mr-2"></i>
                        <span class="text-green-700 font-medium">答案は提出できました!</span>
                      </div>
                    </div>
                    <h3 class="font-medium mb-4">あなたの解答</h3>
                    <div class="p-4 border border-gray-200 rounded-lg bg-gray-50">
                      <p class="text-gray-700 whitespace-pre-line">{{ data?.user_answer }}</p>
                    </div>
                    <div class="mt-6">
                      <h3 class="font-medium mb-4">AIによる解析</h3>
                      <div class="space-y-4">
                        <div class="p-4 bg-custom bg-opacity-5 rounded-lg">
                          <Voice v-if="url" :ref="'voice' + index" :id="index" :url="url"></Voice>
                          <h4 class="font-medium text-custom mb-2"
                            style="display: inline-block;margin-left: .5rem;position: relative;bottom: .3rem;">解法の考え方</h4>
                          <p class="text-gray-700">{{ data?.solution_idea }}</p>
                        </div>
                        <div class="p-4 bg-gray-50 rounded-lg">
                          <h4 class="font-medium mb-2">詳細証明</h4>
                          <div class="space-y-3">
                            <p class="text-gray-700" v-for="(item, index) in data?.detailed_proof" :key="index">{{ item }}
                            </p>
  
                          </div>
                        </div>
                        <div class="p-4 bg-yellow-50 rounded-lg">
                          <h4 class="font-medium text-yellow-800 mb-2">重要な知識ポイント</h4>
                          <ul class=" list-inside space-y-2 text-gray-700">
                            <li v-for="(item, index) in data?.key_knowledge" :key="index">{{ item }}</li>
  
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="flex justify-between mt-6">
                    <button class="px-6 py-2 text-custom hover:bg-custom hover:text-white border border-custom rounded-lg"
                      @click="reset_question">
                      <i class="fas fa-redo mr-2"></i>改めて回答
                    </button>
                    <button class="px-6 py-2 bg-custom text-white rounded-lg hover:bg-opacity-90" @click="toNext"
                      v-if="count < 4 && !hidden">
                      <i class="fas fa-arrow-right mr-2"></i> 次の問題
                    </button>
                    <button class="px-6 py-2 bg-custom text-white rounded-lg hover:bg-opacity-90" @click="getScore"
                      v-else>
                      <i class="fas fa-arrow-right mr-2"></i> スコア
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
            
        <div class="space-y-6">

<div class="bg-white p-6 rounded-lg shadow-md h-fit">
  <h3 class="text-lg font-medium mb-4">学習データ</h3>
  <div class="space-y-6">
    <div class="p-4 bg-gray-50 rounded-lg">
      <h4 class="font-medium text-sm mb-3">今週の勉強の概要</h4>
      <div class="space-y-2">
        <div class="flex justify-between text-sm">
          <span class="text-gray-600">問題の完了数</span>
          <span class="font-medium">{{ count_total?.completed_tasks }}</span>
        </div>
        <div class="flex justify-between text-sm">
          <span class="text-gray-600">今週の正解率</span>
          <span class="font-medium">{{ count_total?.correctness_rate }}%</span>
        </div>
        <div class="flex justify-between text-sm">
          <span class="text-gray-600">今週の達成率</span>
          <span class="font-medium">{{ count_total?.completion_rate }}%</span>
        </div>
        <!-- <div class="flex justify-between text-sm">
          <span class="text-gray-600">今週の勉強時間</span>
          <span class="font-medium">{{ roundMinutes(count_total?.total_study_time) }}{{
            isMinuteOrHour(roundMinutes(count_total?.total_study_time)) }}</span>
        </div> -->
      </div>
    </div>

</div>
  </div>
</div>

        </div>
      </div>
    </div>
  </template>
  
  <script>
  import Speech from 'speak-tts'
  
  import { get,post } from "@/http/axios"
  import Voice from '@/components/voice.vue';
  export default {
    name: 'MathHelper',
    components: {
      Voice
    },
    data() {
      return {
        hidden: false,
        paly_flag: false,
        count: 0,
        url:"",
        speech: null,
        count_total: {},
        total_count: 0,
        speech: null,
        data: {
          "branch_id": null,
          "category_id": null,
          "created_at": null,
          "detailed_proof": null,
          "exercise_id": null,
          "exercise_text": null,
          "id": null,
          "is_correct": null,
          "key_knowledge": [
          ],
          "solution_idea": null,
          "updated_at": null
        },
      }
    },
  
    mounted() {
      this.$nextTick(async () => {
        this.count = this.$route.query.count;
        this.total_count = this.$route.query.totalCount;
        let data = JSON.parse(sessionStorage.getItem('answer_user'));
        this.data = data;
        if(data?.url){
          this.url = data.url
        }else{
          await this.getAudioUrl()
       
        }
        await this.getCunts()
      })
      if (this.$route.query.detail) {
        this.hidden = true
      }
    },
    methods: {
      async getAudioUrl() {
              let data = await get("/getAudioUrl?exercise_id=" + this.data?.exercise_id)
              this.url = data.data.data
      },
      reset_question() {
        this.$router.replace({ path: "/exercise", query: { answer_id: this.data?.id, exercise_id: this.data?.exercise_id, id: this.data?.category_id, branch_id: this.data?.branch_id, user: true,user_question: true } })

      },
      roundMinutes(minutes) {
        return Math.round(minutes);
      },
      isMinuteOrHour(value) {
        // 处理负数和非整数情况
        if (value < 0 || !Number.isInteger(value)) {
          return '無効な入力は、非負の整数を入力してください';
        }
  
        // 处理分钟
        if (value >= 0 && value < 60) {
          return '分';
        }
  
        // 处理小时，包括超过23小时但小于48小时的情况
        if (value >= 0 && value <= 23) {
          return '時間';
        } else if (value > 23 && value <= 47) {
          // 将超过24小时但小于48小时的值转换为0-23的范围
          value = value - 24;
          return '時間';
        } else if (value > 47 && value <= 71) {
          value = value - 48;
          return '時間';
        } else {
          return '時間や分の値は有効ではありません';
        }
      },
      async getCunts() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      let data = await get("/get_week_success_task")
      loading.close()
      this.count_total = data.data.data
    },
      getScore() {
        this.$router.replace({ path: "/suceesUserView", query: { branch_id: this.data.branch_id } })
      },
      toNext() {
        this.$router.replace({ path: "/exercise", query: { id: this.data.category_id, branch_id: this.data.branch_id,user_question:true } })
      }
    }
  };
  </script>
  
  <style scoped>
  .voice_wrap.small{
    margin-bottom: .6rem !important;
  }
  /* Add any scoped styles here */
  </style>
  